<template>
    <div>
      <div class="search">
        <search
          :placeholder="'搜索项目'"
          @result-click="resultClick"
          @on-change="getResult"
          :results="results"
          v-model="value"
          @on-focus="onFocus"
          @on-cancel="onCancel"
          @on-submit="onSubmit"
          ref="search"></search>
      </div>

      <div class="pj-list">
        <div class="pj-items" v-for="item in 12">
          <cell :title="'项目列表信息(见上面PC版页面 )：项目编号、项目名称(文件数)、项目简称、项目经理、分公司、项目类型、立项日期、项目进度。'" link="/project-list" >
            <img slot="icon" width="40" style="display:block;margin-right:15px; border-radius: 40px" src="">
          </cell>
        </div>
      </div>

    </div>
</template>

<script>
  import { TransferDom, Popup, Search, Cell } from 'vux'

  export default {
    directives: {
      TransferDom
    },
    components: {
      Popup,
      Search,
      Cell
    },
    data () {
      return {
        show14: false,
        results: [],
        value: ''
      }
    },
    methods: {
      setFocus () {
        this.$refs.search.setFocus()
      },
      resultClick (item) {
        window.alert('you click the result item: ' + JSON.stringify(item))
      },
      getResult (val) {
        console.log('on-change', val)
      },
      onSubmit () {
        // this.$refs.search.setBlur()
        // console.log(this.$refs.search.setBlur())
      },
      onFocus () {
        console.log('on focus')
      },
      onCancel () {
        console.log('on cancel')
      }
    }
  }
</script>

<style scoped>
  .pj-list{
    margin-top: 50px;
  }
  .pj-list /deep/ .vux-label{
    font-size: 10px;
    border-bottom: 1px solid #eee;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-height: 1.7;
    -webkit-box-orient: vertical;
  }
  .search{
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
  }
</style>
